<template>
  <div>
    <el-card shadow="naver"
      v-for="(item, index) in userSelectors"
      :key="index"
      style="margin-top:10px"
      class="user-card"
    >
      <el-button
        @click="delUserSelector(userSelectors, index)"
        type="text"
        size="small"
        icon="el-icon-remove"
        >移除</el-button
      >
      <br />
      <el-select size="mini" style="width:100%" v-model="item.selectorId" placeholder="选择人员类型">
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="item in allUserSelectors"
          :key="item.id"
        >
        </el-option>
      </el-select>
       <p class="text-description">{{getUserSeletorDescription(item.selectorId)}}</p>
      <el-input
        size="mini"
        placeholder="请选择"
        
        :value="item.selections|getSelectionsName"
        :readonly="true"
      >
        <el-button
          slot="suffix"
          size="mini"
          type="text"
          @click="
            $refs.userSelections.show({
              index: index,
              selectorId: item.selectorId
            })
          "
          >选择</el-button
        >
      </el-input>
      <el-input
        size="mini"
        v-model="item.parameter"
        placeholder="参数"
      ></el-input>

      <el-radio-group size="mini" v-model="item.handleType">
        <el-radio :label="0">审批</el-radio>
        <el-radio :label="1">抄送</el-radio>
      </el-radio-group>
      <el-input
        size="mini"
        v-model="item.description"
        placeholder="描述"
      ></el-input>
    </el-card>
    <userSelections ref="userSelections" @ok-click="userSelectionsOkHandler"></userSelections>
  </div>
</template>

<script>
import userSelections from "./userSelections";
export default {
  components: { userSelections },
  props: {
    userSelectors: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  filters: {
    getSelectionsName(selections)
    {
      if(!selections)return '';
      var names=[];
      selections.forEach(s=>{
        names.push(s.name)
      })
      return names.join(',')
    }
  },
  data() {
    return {
      allUserSelectors: []
    };
  },
  mounted() {
    this.loadUserSelectors();
  },
  methods: {
    loadUserSelectors() {
      this.$store.dispatch("workflow/getAllUserSelectors").then(res => {
        console.log(res);
        this.allUserSelectors = res;
      });
    },

    delUserSelector(conditions, index) {
      conditions.splice(index, 1);
    },
    userSelectionsOkHandler(value) {
      debugger
      var item = this.userSelectors[value.index];
      
      this.$set(item,'selections',[])
      value.value.forEach(selection=>{
        item.selections.push({
          id:selection.id,
          name:selection.name
        })
      })
    },
     getUserSeletorDescription(id)
    {
      var selectors =this.allUserSelectors.filter(c=>c.id==id);
      return selectors.length==0?"":selectors[0].description;
    }
  }
};
</script>

<style>
/* .user-card .el-card__body{
  padding: 10px;
} */


</style>
